<template>
  <PageContainer>
    <view class="container p-12">
      <Header title="添加跟进记录" />
      <view class="bg-white br-8 px-12">
        <UniForms :modelValue="followRecordFrom" ref="followRecordFromRef">
          <UniFormsItem
            label="跟进时间"
            name="followTime"
            required
            labelWidth="100"
            :contentRight="true"
            :rules="[{ required: true, errorMessage: '请选择跟进时间' }]"
          >
            <UniDatetimePicker
              type="date"
              v-model="followRecordFrom.followTime"
              :clear-icon="true"
              :border="false"
            />
          </UniFormsItem>
          <UniFormsItem
            label="跟进方式"
            name="followMethod"
            required
            labelWidth="100"
            :contentRight="true"
            :rules="[{ required: true, errorMessage: '请选择跟进方式' }]"
          >
            <view class="disFlxAC gap-8 flexEnd" @click="actionSheetShow = true">
              <text class="fz-14 linh-20" style="color: #999996">
                {{ followRecordFrom.followMethod || '请选择跟进方式' }}
              </text>
              <text class="ali-icon icon-you1 fz-16" style="color: #999996"></text>
            </view>
          </UniFormsItem>
          <UniFormsItem
            label="跟进内容摘要"
            required
            labelWidth="100"
            :contentRight="true"
            labelPosition="top"
            name="followSummary"
            :rules="[{ required: true, errorMessage: '请填写跟进内容摘要' }]"
          >
            <FormInput
              v-model:model-value="followRecordFrom.followSummary"
              :input-border="false"
              :maxlength="200"
              type="textarea"
              placeholder="简要描述此次跟进沟通的主要内容，重点突出关键信息，如对方需求变化、项目进展、合作意向等"
              :autoHeight="true"
              :styles="{
                backgroundColor: '#F2F3F5',
                height: '216rpx',
              }"
            />
          </UniFormsItem>
          <UniFormsItem
            label="跟进附件文件"
            labelWidth="100"
            :contentRight="true"
            labelPosition="top"
          >
            <FormUploadFile
              v-model:model-value="followRecordFrom.attachmentPathsList"
              mediaType="doc"
              width="160rpx"
              height="160rpx"
              :limit="5"
            />
          </UniFormsItem>
          <UniFormsItem
            label="沟通记录截图"
            labelWidth="100"
            :contentRight="true"
            labelPosition="top"
          >
            <ImgUpload
              :row="3"
              :limit="9"
              width="186rpx"
              height="186rpx"
              v-model="screenshotPaths"
            ></ImgUpload>
          </UniFormsItem>
        </UniForms>
      </view>
    </view>
    <ActionSheet
      v-model:model-value="actionSheetShow"
      :item-list="itemList"
      @change="handleShowActionSheetChange"
    ></ActionSheet>

    <TButtonGroup
      :styles="{
        backgroundColor: '#fff',
        display: 'block',
      }"
    >
      <TButton
        text="保存记录"
        type="none"
        :customStyle="{
          backgroundColor: '#2878FF',
          color: '#FFFFFF',
        }"
        custom-class="h-44 linh-44 br-22"
        @click="handleSave"
      />
    </TButtonGroup>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* addFollowUpRecords 添加跟进记录 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import UniForms from '@/components/Form/uni_modules/uni-forms/uni-forms.vue';
  import UniFormsItem from '@/components/Form/uni_modules/uni-forms-item/uni-forms-item.vue';
  import { computed, reactive, ref } from 'vue';
  import type { IFollowRecordFrom } from '@/api/businessOpportunities/type';
  import UniDatetimePicker from '@/components/Form/uni_modules/uni-datetime-picker/uni-datetime-picker.vue';
  import FormUploadFile from '@/components/Form/components/upload/FormUploadFile.vue';
  import ImgUpload from '@/components/Form/components/upload/FormUploadFile.vue';
  import FormInput from '@/components/Form/components/FormInput.vue';
  import ActionSheet, { type ActionSheetItem } from '@/components/ActionSheet/index.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { boFollowAddOrUpdate } from '@/api/businessOpportunities';
  import { navigateBack, onLoad } from '@/router';
  import { Toast } from '@/utils';
  let successFn: () => void;

  onLoad<'addFollowUpRecords'>((op) => {
    followRecordFrom.id = op.data.id;
    followRecordFrom.boInfoId = op.data.boInfoId;
    followRecordFrom.followTime = op.data.followTime;
    followRecordFrom.followMethod = op.data.followMethod;
    followRecordFrom.followSummary = op.data.followSummary;
    followRecordFrom.attachmentPathsList = op.data.attachmentPathsList || [];
    followRecordFrom.screenshotPathsList = op.data.screenshotPathsList || [];
    successFn = op.successFn;
  });

  const screenshotPaths = computed({
    get() {
      return followRecordFrom.screenshotPathsList.join(',');
    },
    set(val) {
      followRecordFrom.screenshotPathsList = val.split(',');
    },
  });
  const actionSheetShow = ref(false);
  const itemList: ActionSheetItem[] = [
    {
      text: '电话沟通',
    },
    {
      text: '微信沟通',
    },
    {
      text: '邮件沟通',
    },
    {
      text: '线下面聊',
    },
  ];
  const followRecordFrom = reactive<IFollowRecordFrom>({
    followTime: '',
    followMethod: '',
    followSummary: '',
    attachmentPathsList: [],
    screenshotPathsList: [],
    boInfoId: 0,
  });

  function handleShowActionSheetChange(index: number) {
    followRecordFrom.followMethod = itemList[index].text;
  }
  const followRecordFromRef = ref<InstanceType<typeof UniForms>>();
  const handleSave = async () => {
    await followRecordFromRef.value?.validate();
    followRecordFrom.screenshotPathsList = followRecordFrom.screenshotPathsList.filter(
      (item) => item,
    );
    followRecordFrom.attachmentPathsList = followRecordFrom.attachmentPathsList.filter(
      (item) => item,
    );
    await boFollowAddOrUpdate({
      ...followRecordFrom,
      followTime: followRecordFrom.followTime + ' 00:00:00',
    });
    successFn?.();
    Toast('保存成功');
    navigateBack();
  };
</script>

<style lang="scss" scoped>
  .uni-easyinput__content-textarea {
    margin: 12rpx !important;
  }
</style>
